<template>
	<view>
		<view class="flex-box">
			<view class="single-box" v-for="item in list" :key="item.id" @click="skipToBtnPage(item.id,item.name)">
				<image class="single-img" :src="'http://images.zmzpl.com/'+item.img" ></image>
				<text>{{item.name}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array
		},
		name:'btn-box',
		data() {
			return {
				
			};
		},
		methods:{
			// getBtnBoxInfo(){
			// 	console.log(123)
			// 	// console.log(uni.getBtnBoxInfo())
			// }
			skipToBtnPage(id,title){
				uni.navigateTo({
					url:'/pages/goods/goods?id='+id+'&title='+title
				})
			}
		},
		created() {
			// this.getBtnBoxInfo()
		}
	}
</script>

<style lang="scss" scoped>
.flex-box{
	display: flex;
	// justify-content: space-around;
	flex-wrap: wrap;
	padding: 0 16rpx;
	// margin-top: 43rpx;
	.single-box{
		line-height: 0.8;
		width: 95rpx;
		height: 123rpx;
		display: flex;
		flex-direction: column;
		margin: 0 25rpx;
		margin-top: 22rpx;
		.single-img{
			width: 90rpx;
			height: 90rpx;
			margin: 0 auto;
		}
		text{
			margin-top: 10rpx;
			width:95rpx;
			height:23rpx;
			font-size:24rpx;
			font-weight:500;
			color:#444444;
			word-break:keep-all;
			white-space:nowrap;
			text-align: center;
		}
	}
}
</style>
